﻿<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
		<meta charset="utf-8" />
		<script type="text/javascript" src="../../jquery-1.7.js"></script>
		<style type="text/css">
		*{
			margin:0;padding:0;
		}
		html,body{height:100%;width:100%;}
		canvas{display:block;border:1px double #ccc;}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500"></canvas>
		<script type="text/javascript">
		var canvas = $("#myCanvas");
		var context = canvas.get(0).getContext("2d");
		//同于测试叠加的数据
		context.fillStyle = "rgb(15,166,12)";
		context.shadowBlur = 20;
		context.shadowColor = "rgb(0,0,0)";
		context.fillRect(50,50,100,100);
		
		context.shadowBlur = 0;
		context.shadowOffsetX = 10;
		context.shadowOffsetY = 10;
		context.shadowColor = "rgba(100,100,100,0.5)";
		context.fillRect(200,50,100,100);
		
		context.shadowColor = "rgb(255,0,0)";
		context.shadowBlur = 50;
		context.shadowOffsetX = 0;
		context.shadowOffsetY = 0;
		context.beginPath();
		context.arc(400,100,50,0,Math.PI*2,false);
		context.fill();
		
		</script>
	</body>
</html>